// ParagraphWithBadge.ts
import { Paragraph } from '@tiptap/extension-paragraph' // 从 tiptap 中导入默认段落扩展
import { useBadgeStroe } from '@/stores/badgeStroe'
import { currentNodeInfo } from '@/stores/currentNodeStore'



// 使用 Tiptap 提供的 .extend() 方法对原始段落进行扩展，添加边框相关元素
export const ParagraphBadge = Paragraph.extend({
  name: 'paragraph',
  addNodeView() {  //定义一个自定义的节点视图（Node View）
    // node: 当前段落节点对象；
    // view: 编辑器视图对象；
    // getPos: 获取当前节点位置的方法。
    return ({ node, view, getPos }) => {

      //创建一个容器 <div> 来包裹整个段落内容（包括文本和徽章）。
      const container = document.createElement('div')
      //类名设置为 paragraph-container，以供后续使用。
      container.className = 'paragraph-container'

      //创建一个 <span> 表示段落文本；
      const text = document.createElement('span')
      text.className = 'paragraph-text'
      //显示段落的实际内容（textContent），若为空则显示 (空段落)。
      text.textContent = node.textContent || '(空段落)'


      const badge = document.createElement('span')  // 创建一个 <span> 表示徽章；
      //类名模仿 Element Plus 的 el-badge，并添加自定义样式类 custom-badge。
      badge.className = 'el-badge custom-badge'

      const badgeStore = useBadgeStroe()
      const nodeInfo = currentNodeInfo()
      console.log("当前节点信息-------", nodeInfo.nodeId);

      const paragraphPos = getPos(); // 段落起始位置
      const paragraphEndPos = paragraphPos + node.nodeSize;  // 计算段落末尾位置
      const badgeId = `${nodeInfo.nodeId}_${paragraphPos}_${paragraphEndPos}`;   // 生成唯一固定的 徽章ID
      // console.log("当前badgeId-------", badgeId);
      // badge.dataset.badgeId = badgeId  // 将 ID 存储在 data-badge-id 属性中，方便后续访问
      // container.dataset.badgeId = badgeId;

      badge.dataset.badgeId = badgeId;
      badge.dataset.abc = badgeId;



      //创建徽章内部内容 <span>；
      const badgeContent = document.createElement('span')
      badgeContent.className = 'el-badge__content'
      badgeContent.textContent = '评'


      // 创建徽章的外层边框容器 <div>；
      const badgeWrapper = document.createElement('div')
      badgeWrapper.className = 'badge-wrapper' // 边框容器类名
      badgeWrapper.appendChild(badgeContent)  //将徽章内容插入到边框容器中。

      badge.appendChild(badgeWrapper)
      container.appendChild(text)
      container.appendChild(badge)

      // updateBadgeContent(badge, badgeId); // 更新徽章所显示评论数-----------------有问题！！！

      //给徽章添加点击事件监听器；// 点击事件，触发弹窗
      badge.addEventListener('click', () => {
        console.log('徽章id:', badgeId)

        // 创建一个自定义事件 paragraph - comment - click；
        // 携带段落文本、位置和节点对象等数据；
        // 设置 bubbles: true 表示事件会冒泡，方便父级组件监听。

        const event = new CustomEvent('paragraph-comment-click', {
          detail: {
            getPos,
            node,
            id: badgeId,
          },
          bubbles: true, // 确保事件冒泡
          cancelable: true
        })
        console.log("派发事件Event：", event);

        // 在容器上派发这个自定义事件；
        // 外部组件可以通过监听此事件来弹出对话框或其他操作。
        container.dispatchEvent(event);
      })

      // 初始化时 根据内容决定是否显示徽章
      // updateBadgeVisibility(node)

      // 这是 Tiptap 中 NodeView 的一个关键部分，用于告诉编辑器如何渲染和更新节点（这里是段落）。它是一个返回对象的函数，定义了这个自定义段落节点的行为。
      // 返回一个对象，告诉 Tiptap 如何管理这个节点：
      // dom: 实际渲染的 DOM 节点；
      // contentDOM: 可编辑的内容区域（即 text）；
      // update: 当段落内容更新时调用的回调；
      // 如果是段落节点，就更新文本内容和徽章显示状态；
      // 返回 true 表示成功更新。
      return {
        dom: container,
        contentDOM: text,
        update: (updatedNode) => {
          if (updatedNode.type.name === 'paragraph') {
            text.textContent = updatedNode.textContent || ''
            // updateBadgeVisibility(updatedNode); // 小红点是否显示

            // const updatedPos = getPos();
            // const paragraphEndPos = paragraphPos + node.nodeSize;  // 计算段落末尾位置
            // const newParagraphId = `${nodeInfo.nodeId}-${updatedPos}-${paragraphEndPos}`;
            // container.dataset.paragraphId = newParagraphId;
            // badge.dataset.paragraphId = newParagraphId;
            return true
          }
          return false
        },
      }

      // 根据文本内容决定徽章是否显示
      // function updateBadgeVisibility(updatedNode) {
      //   if (!updatedNode) { //
      //     // console.log('文本更新是，updatedNode的数量：', updatedNode);
      //     badge.style.opacity = '0';
      //     return;
      //   }

        // // 拿到段落的字符数量
          // const paragraphLength = updatedNode.textContent?.trim().length || 0;
          // // console.log('段落长度-------------:', paragraphLength);
          // if (paragraphLength > 0) {
          //   // 显示徽章
          //   // badge.style.display = 'inline-block';
          //   badge.style.opacity = '1';
          // } else {
          //   // // 隐藏徽章
          //   badge.style.opacity = '0';
          // }
        // }

        // 获取并设置评论数
      //   function updateBadgeContent(badgeElement: HTMLElement, badgeId: string) {
      //     // 触发获取评论数据的异步操作
      //     badgeStore.getBadgeByParagraphId({ paragraphId: badgeId });

      //     // 获取评论列表
      //     const comments = badgeStore.badgeInfoList;
      //     // console.log("当前段落评论数量", comments.length);

      //     // 更新徽章文字为评论数量
      //     const badgeContentEl = badgeElement.querySelector('.el-badge__content'); // 获取徽章内容元素
      //     // console.log("元素=====>", badgeContentEl);
      //     if (badgeContentEl) {// 如果徽章内容元素存在
      //       badgeContentEl.textContent = comments.length > 0 ? comments.length.toString() : '0'; //
      //     }
      // }



    }
  }
})
